<template>
  <div class="regional_water">
    <el-row class="all_main">
      <dragdrop :width="0" :widthLeft="'140px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>区域楼栋</span>
              </div>
              <div class="tree_list">
                <el-tree
                  :data="treedata"
                  node-key="id"
                  :expand-on-click-node="false"
                  @node-click="clickNode"
                  :highlight-current="true"
                  ref="tree"
                  :indent="1"
                  :default-expanded-keys="defaultTree"
                >
                  <span
                    class="custom-tree-node"
                    slot-scope="{ node, data }"
                    :style="{ paddingLeft: '0px' }"
                  >
                    <span
                      :class="
                          data.type == 'area' ? 'colorfont' : 'colorfont1'
                        "
                    >
                      <i :class="data.icon" :style="{ marginRight: '5px' }"></i>
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
              <myTime @handleGetTime="handleGetTime"></myTime>
              <!-- <el-form-item label="开始日期:">
                <el-date-picker
                  style="width: 130px"
                  v-model="startDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  size="mini"
                  :clearable="false"
                ></el-date-picker>
                <el-time-picker
                  style="width: 110px"
                  v-model="startTime"
                  value-format="HH:mm:ss"
                  size="mini"
                  :clearable="false"
                ></el-time-picker>
              </el-form-item>
              <el-form-item label="结束日期:">
                <el-date-picker
                  style="width: 130px"
                  v-model="endDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  size="mini"
                  :clearable="false"
                ></el-date-picker>
                <el-time-picker
                  style="width: 110px"
                  v-model="endTime"
                  value-format="HH:mm:ss"
                  size="mini"
                  :clearable="false"
                ></el-time-picker>
              </el-form-item>-->
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'first' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DailySubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'third' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'second' ? true : false"
                >查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="() => changeradio(1)" v-if="radio == 1">当日</el-button>
                <el-button type="primary" icon="el-icon-search" @click="() => changeradio(3)" v-if="radio == 1">本月</el-button>
                <!-- <el-radio-group v-model="radio" @change="changeradio">
                  <el-radio :label="1" class="radio1" style="marginright: 10px">当日</el-radio>
                  <el-radio :label="2" style="marginright: 10px; marginleft: 10px">本周</el-radio>
                  <el-radio :label="3" style="marginright: 10px; marginleft: 10px">本月</el-radio>
                  <el-radio :label="4" style="marginright: 10px; marginleft: 10px">自定义</el-radio>
                </el-radio-group>-->
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'first' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'third' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'second' ? true : false"
                >导出</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'first' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'third' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'second' ? true : false"
                >打印</el-button>
              </el-form-item>
              <el-form-item v-if="activeName == 'first' ? true : false">
                <el-popover width="500" placement="top" trigger="click">
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.buildingName.label"
                      v-model="formThead.buildingName.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                    <!-- <el-checkbox
                      style="width: 10%"
                      :label="formThead.roomName.label"
                      v-model="formThead.roomName.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>-->
                    <!-- <el-checkbox
                      style="width: 10%"
                      :label="formThead.terminalCode.label"
                      v-model="formThead.terminalCode.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.Morning.label"
                      v-model="formThead.Morning.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.Lunch.label"
                      v-model="formThead.Lunch.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.Dinner.label"
                      v-model="formThead.Dinner.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.Night.label"
                      v-model="formThead.Night.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                    <!-- <el-checkbox
                    style="width: 10%"
                    :label="formThead.Other.label"
                    v-model="formThead.Other.checked"
                    @change="checkboxChanged()"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead.Sum.label"
                      v-model="formThead.Sum.checked"
                      @change="checkboxChanged()"
                    ></el-checkbox>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'second' ? true : false">
                <el-popover width="500" placement="top" trigger="click">
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.cardNumber.label"
                      v-model="formThead2.cardNumber.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.userName.label"
                      v-model="formThead2.userName.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.userNumber.label"
                      v-model="formThead2.userNumber.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.dataMakeTime.label"
                      v-model="formThead2.dataMakeTime.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.waterAmount.label"
                      v-model="formThead2.waterAmount.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <!-- <el-checkbox
                      style="width: 10%"
                      :label="formThead2.surplusAmount.label"
                      v-model="formThead2.surplusAmount.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.expenditure.label"
                      v-model="formThead2.expenditure.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.newBalance.label"
                      v-model="formThead2.newBalance.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.useType.label"
                      v-model="formThead2.useType.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.serialNumber.label"
                      v-model="formThead2.serialNumber.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.terminalName.label"
                      v-model="formThead2.terminalName.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      :label="formThead2.terminalCode.label"
                      v-model="formThead2.terminalCode.checked"
                      @change="checkboxChanged2()"
                    ></el-checkbox>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'third' ? true : false">
                <el-popover width="550" placement="top" trigger="click">
                  <el-row>
                    <!-- <el-checkbox
              style="width: 20%"
              @change="checkboxChanged3()"
              :label="formThead3.dataMakeTime.label"
              v-model="formThead3.dataMakeTime.checked"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.consumeWaterAmountSum.label"
                      v-model="formThead3.consumeWaterAmountSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountSum.label"
                      v-model="formThead3.waterAmountSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.amountCount.label"
                      v-model="formThead3.amountCount.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureSum.label"
                      v-model="formThead3.expenditureSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureMax.label"
                      v-model="formThead3.expenditureMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureMin.label"
                      v-model="formThead3.expenditureMin.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountMax.label"
                      v-model="formThead3.waterAmountMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountMin.label"
                      v-model="formThead3.waterAmountMin.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.userCount.label"
                      v-model="formThead3.userCount.checked"
                    ></el-checkbox>
                  </el-row>

                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
            </el-form>
            <div class="tabs_main">
              <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="时段用水汇总" name="first">
                  <el-table
                    v-loading="loading"
                    :data="detailslist"
                    ref="table"
                    border
                    highlight-current-row
                    :header-cell-style="(header) => headFirst(header, 2)"
                    style="width: 100%"
                    :cell-style="
                      detailsTotal
                        ? (res) => headFirst_col(res, detailslist)
                        : () => {}
                    "
                  >
                    <el-table-column
                      prop="buildingName"
                      label="楼栋"
                      v-if="formThead.buildingName.checked"
                      align="center"
                      min-width="140px"
                    ></el-table-column>

                    <el-table-column
                      prop="terminalCode"
                      label="设备编号"
                      align="center"
                      v-if="formThead.terminalCode.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="Morning"
                      label="上午"
                      v-if="formThead.Morning.checked"
                      align="center"
                      min-width="100px"
                    >
                      <el-table-column
                        prop="expenditureMorning"
                        label="金额(元)"
                        v-if="formThead.expenditureMorning.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>{{ scope.row.expenditureMorning | amountyuan }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountMorning"
                        label="消费次数"
                        v-if="formThead.consumeCountMorning.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>
                    <el-table-column
                      prop="Lunch"
                      label="中午"
                      v-if="formThead.Lunch.checked"
                      align="center"
                    >
                      <el-table-column
                        prop="expenditureLunch"
                        label="金额(元)"
                        v-if="formThead.expenditureLunch.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>{{ scope.row.expenditureLunch | amountyuan }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountLunch"
                        label="消费次数"
                        v-if="formThead.consumeCountLunch.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>
                    <el-table-column
                      prop="Dinner"
                      label="下午"
                      v-if="formThead.Dinner.checked"
                      align="center"
                    >
                      <el-table-column
                        prop="expenditureDinner"
                        label="金额(元)"
                        v-if="formThead.expenditureDinner.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>{{ scope.row.expenditureDinner | amountyuan }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountDinner"
                        label="消费次数"
                        v-if="formThead.consumeCountDinner.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>
                    <el-table-column
                      prop="Night"
                      label="晚上"
                      v-if="formThead.Night.checked"
                      align="center"
                    >
                      <el-table-column
                        prop="expenditureNight"
                        label="金额(元)"
                        v-if="formThead.expenditureNight.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>{{ scope.row.expenditureNight | amountyuan }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountNight"
                        label="消费次数"
                        v-if="formThead.consumeCountNight.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>
                    <!-- <el-table-column
                      prop="Other"
                      label="其余时间"
                      v-if="formThead.Other.checked"
                      align="center"
                    >
                      <el-table-column
                        prop="expenditureOther"
                        label="金额(元)"
                        v-if="formThead.expenditureOther.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>
                            {{ scope.row.expenditureOther | amountyuan }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountOther"
                        label="消费次数"
                        v-if="formThead.consumeCountOther.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>-->
                    <el-table-column
                      prop="Sum"
                      label="小计"
                      v-if="formThead.Sum.checked"
                      align="center"
                    >
                      <el-table-column
                        prop="expenditureSum"
                        label="金额(元)"
                        v-if="formThead.expenditureSum.checked"
                        align="center"
                        min-width="100px"
                      >
                        <template slot-scope="scope">
                          <div>{{ scope.row.expenditureSum | amountyuan }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="consumeCountSum"
                        label="消费次数"
                        v-if="formThead.consumeCountSum.checked"
                        align="center"
                      ></el-table-column>
                    </el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChangepage"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount"
                    ></el-pagination>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="每日用水汇总" name="third">
                  <el-table
                    ref="detailslist3"
                    :data="detailslist3"
                    border
                    highlight-current-row
                    row-key="id"
                    :tree-props="{
                      children: 'dayList',
                      hasChildren: 'hasChildren',
                    }"
                    :header-cell-style="headFirst"
                    style="width: 100%"
                    v-loading="loading3"
                    :cell-style="
                      detailsDailyTotal
                        ? (res) => headFirst_col(res, headerArr)
                        : () => {}
                    "
                  >
                    <el-table-column
                      prop="buildingName"
                      label="楼栋"
                      v-if="formThead3.buildingName.checked"
                      min-width="140px"
                    ></el-table-column>
                    <!-- <el-table-column
                      prop="roomName"
                      label="房间"
                      v-if="formThead3.roomName.checked"
                      align="center"
                      min-width="100px"
                    ></el-table-column>
                    <el-table-column
                      prop="terminalCode"
                      label="设备编号"
                      v-if="formThead3.terminalCode.checked"
                      align="center"
                      min-width="100px"
                    ></el-table-column>-->
                    <el-table-column
                      prop="dataMakeTime"
                      label="日期"
                      v-if="formThead3.dataMakeTime.checked"
                      align="center"
                      min-width="90px"
                    ></el-table-column>
                    <el-table-column
                      prop="consumeWaterAmountSum"
                      label="消费用水量(升)"
                      v-if="formThead3.consumeWaterAmountSum.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="waterAmountSum"
                      label="总用水量(升)"
                      v-if="formThead3.waterAmountSum.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="expenditureSum"
                      label="总消费金额(元)"
                      v-if="formThead3.expenditureSum.checked"
                      align="center"
                      min-width="120px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.expenditureSum | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="expenditureMax"
                      label="单次消费最大金额(元)"
                      v-if="formThead3.expenditureMax.checked"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.expenditureMax | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="expenditureMin"
                      label="单次消费最小金额(元)"
                      v-if="formThead3.expenditureMin.checked"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.expenditureMin | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="waterAmountMax"
                      label="单次最大用水量(升)"
                      v-if="formThead3.waterAmountMax.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="waterAmountMin"
                      label="单次最小用水量(升)"
                      v-if="formThead3.waterAmountMin.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="userCount"
                      label="使用人数"
                      v-if="formThead3.userCount.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="amountCount"
                      label="使用次数"
                      v-if="formThead3.amountCount.checked"
                      align="center"
                    ></el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange3"
                      @current-change="handleCurrentChangepage3"
                      :current-page="currentPage3"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize3"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount3"
                    ></el-pagination>
                  </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="用水明细" name="second">
                  <el-table
                    v-loading="loading2"
                    :data="detailslist2"
                    ref="detailslist2"
                    border
                    highlight-current-row
                    :header-cell-style="headFirst"
                    style="width: 100%"
                    :cell-style="
                      ermainaldeTotal
                        ? (res) => headFirst_col(res, detailslist2)
                        : () => {}
                    "
                  >
                    <el-table-column
                      prop="cardNumber"
                      label="卡号"
                      v-if="formThead2.cardNumber.checked"
                      min-width="110px"
                    ></el-table-column>
                    <el-table-column prop="userName" label="姓名" v-if="formThead2.userName.checked"></el-table-column>
                    <el-table-column
                      prop="userNumber"
                      label="人员编号"
                      v-if="formThead2.userNumber.checked"
                      min-width="110px"
                    ></el-table-column>
                    <el-table-column
                      prop="dataMakeTime"
                      label="操作时间"
                      width="160"
                      v-if="formThead2.dataMakeTime.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="waterAmount"
                      label="使用水量"
                      v-if="formThead2.waterAmount.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="expenditure"
                      label="消费金额(元)"
                      v-if="formThead2.expenditure.checked"
                      min-width="120px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.expenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="newBalance"
                      label="剩余金额(元)"
                      v-if="formThead2.newBalance.checked"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.newBalance | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="useType" label="交易类型" v-if="formThead2.useType.checked">
                      <template slot-scope="scope">
                        {{
                        scope.row.useType | filterchargingType
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="serialNumber"
                      label="卡片流水号"
                      v-if="formThead2.serialNumber.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="terminalName"
                      label="设备名称"
                      v-if="formThead2.terminalName.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="terminalCode"
                      label="设备编号"
                      v-if="formThead2.terminalCode.checked"
                    ></el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange2"
                      @current-change="handleCurrentChangepage2"
                      :current-page="currentPage2"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize2"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount2"
                    ></el-pagination>
                  </div>
                </el-tab-pane>-->
              </el-tabs>
            </div>
          </div>
        </template>
      </dragdrop>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultTree: [],
      elform: {},
      radio: 1,
      datetime: [],
      formThead: {
        buildingName: {
          label: '楼栋',
          prop: 'buildingName',
          checked: true
        },
        roomName: {
          label: '房间',
          prop: 'roomName',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: false
        },
        Morning: { label: '上午', prop: 'Morning', checked: true },
        Lunch: { label: '中午', prop: 'Lunch', checked: true },
        Dinner: { label: '下午', prop: 'Dinner', checked: true },
        Night: { label: '晚上', prop: 'Night', checked: true },
        // Other: { label: "其余时间", prop: "Other", checked: true },
        Sum: { label: '小计', prop: 'Sum', checked: true },

        expenditureMorning: {
          label: '金额',
          prop: 'expenditureMorning',
          checked: true
        },
        consumeCountMorning: {
          label: '消费次数',
          prop: 'consumeCountMorning',
          checked: true
        },

        expenditureLunch: {
          label: '金额',
          prop: 'expenditureLunch',
          checked: true
        },
        consumeCountLunch: {
          label: '消费次数',
          prop: 'consumeCountLunch',
          checked: true
        },

        expenditureDinner: {
          label: '金额',
          prop: 'expenditureDinner',
          checked: true
        },
        consumeCountDinner: {
          label: '消费次数',
          prop: 'consumeCountDinner',
          checked: true
        },

        expenditureNight: {
          label: '金额',
          prop: 'expenditureNight',
          checked: true
        },
        consumeCountNight: {
          label: '消费次数',
          prop: 'consumeCountNight',
          checked: true
        },

        expenditureOther: {
          label: '金额',
          prop: 'expenditureOther',
          checked: true
        },
        consumeCountOther: {
          label: '消费次数',
          prop: 'consumeCountOther',
          checked: true
        },

        expenditureSum: {
          label: '金额',
          prop: 'expenditureSum',
          checked: true
        },
        consumeCountSum: {
          label: '金额',
          prop: 'consumeCountSum',
          checked: true
        }
      },
      activeName: 'first',
      treedata: [],
      detailsTotal: null,
      headerArr: [],
      detailslist: [],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      searchInfo: {},
      currentPage: 0,
      recordCount: 0,
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: '',
      checktype: '',
      typeid: '',
      exportlist: [],
      filename: '楼栋用水汇总',

      //用水明细
      loading2: false,
      ermainaldeTotal: null,
      detailslist2: [],
      formThead2: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userName: { label: '姓名', prop: 'userName', checked: true },
        userNumber: { label: '人员编号', prop: 'userNumber', checked: true },
        dataMakeTime: {
          label: '操作时间',
          prop: 'dataMakeTime',
          checked: true
        },
        waterAmount: { label: '使用水量', prop: 'waterAmount', checked: true },
        // surplusAmount: {
        //   label: '剩余水量',
        //   prop: 'surplusAmount',
        //   checked: true
        // },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: {
          label: '剩余金额(元)',
          prop: 'newBalance',
          checked: true
        },
        useType: { label: '交易类型', prop: 'useType', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        terminalName: {
          label: '设备名称',
          prop: 'terminalName',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: false
        }
        // pulseFlag: { label: "是否有脉冲", prop: "pulseFlag", checked: true },
      },
      pageNum2: 1,
      pageSize2: 20,
      searchInfo2: {},
      currentPage2: 0,
      recordCount2: 0,
      exportlist2: [],
      filename2: '楼栋用水明细表',

      // 区域每日用水明细表
      loading3: false,
      detailsDailyTotal: null,
      detailslist3: [],
      formThead3: {
        buildingName: {
          label: '楼栋',
          prop: 'buildingName',
          checked: true
        },
        dataMakeTime: { label: '日期', prop: 'dataMakeTime', checked: true },
        consumeWaterAmountSum: {
          label: '消费用水量(升)',
          prop: 'consumeWaterAmountSum',
          checked: true
        },
        waterAmountSum: {
          label: '总用水量(升)',
          prop: 'waterAmountSum',
          checked: true
        },

        expenditureSum: {
          label: '总消费金额(元)',
          prop: 'expenditureSum',
          checked: true
        },
        expenditureMax: {
          label: '单次最大消费金额(元)',
          prop: 'expenditureMax',
          checked: true
        },
        expenditureMin: {
          label: '单次最小消费金额(元)',
          prop: 'expenditureMin',
          checked: true
        },
        waterAmountMax: {
          label: '单次最大用水量(升)',
          prop: 'waterAmountMax',
          checked: true
        },

        waterAmountMin: {
          label: '单次最小用水量(升)',
          prop: 'waterAmountMin',
          checked: true
        },
        userCount: { label: '使用人数', prop: 'userCount', checked: true },
        amountCount: { label: '使用次数', prop: 'amountCount', checked: true }
      },
      pageNum3: 1,
      pageSize3: 20,
      searchInfo3: {},
      currentPage3: 0,
      recordCount3: 0,
      exportlist3: [],
      filename3: '楼栋每日用水汇总表'
    }
  },
  filters: {
    filterpulseFlag: function(pulseFlag) {
      if (pulseFlag == 0) {
        return (pulseFlag = '是')
      }
      if (cardState == 1) {
        return '(cardState = "否")'
      }
    }
  },
  created() {
    this.startDate = this.getNowTime('yy-mm-dd')
    this.endDate = this.getNowTime('yy-mm-dd')
    this.startTime = ''
    this.endTime = ''
    this.timechange(1)
  },
  mounted() {
    this.getareabuldingtree()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    handleGetTime(val) {
      console.log(val)
      this.startDate = val.startDate
      this.endDate = val.endDate
      this.startTime = val.startTime
      this.endTime = val.endTime
      this.radio = val.timeradio
    },
    //
    // 用水汇总表格重新渲染
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    // 楼栋用水明细表格重新渲染
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['detailslist2'].doLayout()
      })
    },
    //时间格式
    timechange(val) {
      if (val == 1) {
        var date = new Date()
        var seperator1 = '-'
        var seperator2 = ':'
        //以下代码依次是获取当前时间的年月日时分秒
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var strDate = date.getDate()
        var minute = date.getMinutes()
        var hour = date.getHours()
        var second = date.getSeconds()
        //固定时间格式
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        if (hour >= 0 && hour <= 9) {
          hour = '0' + hour
        }
        if (minute >= 0 && minute <= 9) {
          minute = '0' + minute
        }
        if (second >= 0 && second <= 9) {
          second = '0' + second
        }
        let timeArr = []
        this.startDate = year + seperator1 + month + seperator1 + strDate
        this.endDate = year + seperator1 + month + seperator1 + strDate
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        this.endTime = +23 + ':' + 59 + ':' + 59
        // let  currentdate =  year + seperator1 + month + seperator1 + strDate
        //          + " " + 0 + ":" + 0 + ":" + 0;
        // let  currentdate2 =  year + seperator1 + month + seperator1 + strDate
        //         + " " + 23 + ":" + 59 + ":" + 59;
        // timeArr.push(currentdate)
        // timeArr.push(currentdate2)
        // return  timeArr
      }
      if (val == 2) {
        var now = new Date() //当前日期
        var nowDayOfWeek = now.getDay() //今天本周的第几天
        var nowDay = now.getDate() + 1 //当前日
        var nowMonth = now.getMonth() //当前月
        var nowYear = now.getYear() //当前年
        nowYear += nowYear < 2000 ? 1900 : 0 //
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
        var weekEndDate = new Date(
          nowYear,
          nowMonth,
          nowDay + (6 - nowDayOfWeek)
        )
        this.startDate = this.formatDate(weekStartDate)
        this.endDate = this.formatDate(weekEndDate)
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        this.endTime = +23 + ':' + 59 + ':' + 59
        console.log(this.startDate)
        console.log(this.endDate)
        // let startime = this.formatDate(weekStartDate)+" "+0+0+":"+0+0+":"+0+0
        // let endtime = this.formatDate(weekEndDate)+" "+2+3+":"+5+9+":"+5+9
        // let timeArr = []
        // timeArr.push(startime)
        // timeArr.push(endtime)
        // return timeArr
      }
      if (val == 3) {
        var date = new Date()
        date.setDate(1)
        var month = parseInt(date.getMonth() + 1)
        var day = date.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        //  let startime = date.getFullYear() + '-' + month + '-' + day+ " "+0+0+":"+0+0+":"+0+0;
        this.startDate = date.getFullYear() + '-' + month + '-' + day
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        console.log(this.startTime)
        var date2 = new Date()
        var currentMonth = date2.getMonth()
        var nextMonth = ++currentMonth
        var nextMonthFirstDay = new Date(date2.getFullYear(), nextMonth, 1)
        var oneDay = 1000 * 60 * 60 * 24
        var lastTime = new Date(nextMonthFirstDay - oneDay)
        var month = parseInt(lastTime.getMonth() + 1)
        var day = lastTime.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        //  let endDate = date2.getFullYear() + '-' + month + '-' + day + " " + 23 + ":" + 59 + ":" + 59;
        this.endDate = date2.getFullYear() + '-' + month + '-' + day
        this.endTime = +23 + ':' + 59 + ':' + 59
      }
    },
    //格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday
    },
    changeradio(radio) {
      this.radio = radio
      if (this.radio == 1) {
        this.timechange(1)
      }
      if (this.radio == 2) {
        this.timechange(2)
      }
      if (this.radio == 3) {
        this.timechange(3)
      }
      if (this.radio == 4) {
        this.startDate = ''
        this.endDate = ''
        this.startTime = ''
        this.endTime = ''
      }

      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    // 树状数据添加
    recursiveget(treedata) {
      for (var i in treedata) {
        if (treedata[i].type == 'area') {
          treedata[i].icon = 'el-icon-map-location'
          this.recursiveget(treedata[i].children)
          this.defaultTree.push(treedata[i].id)
        } else {
          if (treedata[i].type == 'building') {
            treedata[i].icon = 'el-icon-office-building'
          }
          if (treedata[i].type == 'floor') {
            treedata[i].icon = 'el-icon-school'
          }
          if (treedata[i].type == 'room') {
            treedata[i].icon = 'el-icon-house'
          }
          this.recursiveget(treedata[i].children)
        }
      }
      return treedata
    },
    // 获取区域楼栋树形数据
    getareabuldingtree(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.treedata = this.recursiveget(data.messageContent)
          //   this.getarealsit(data.messageContent)
          console.log(this.treedata)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //点击树状
    clickNode(obj, node) {
      console.log(obj)
      this.checktype = obj.type
      this.typeid = obj.name
      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    // 导出专用
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    /**
     * 楼栋用水汇总
     */
    // 获取楼栋用水汇总合计数据
    getTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-data-building-statistics-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 楼栋用水汇总数据查询
    async onSubmit() {
      // if(this.typeid=='' || this.typeid==null || this.typeid==undefined){
      //      this.$message({
      //         message: '请选择所查询区域',
      //         type: 'warning'
      //      });
      //      return
      // }else{
      //     if(this.checktype=='area'){
      //       this.searchInfo.areaGuid=this.typeid
      //     }
      //     if(this.checktype=='building'){
      //       this.searchInfo.buildingGuid=this.typeid
      //     }
      // }
      this.searchInfo = {}
      this.pageNum = 1
      if (this.checktype == 'area') {
        this.searchInfo.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo.layer = this.typeid.split('$')[0]
        this.searchInfo.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo.roomGuid = this.typeid
      }

      // if (this.startDate != null && this.startDate != '') {
      //   this.searchInfo.startDate = this.startDate
      // }
      // if (this.endDate != null && this.endDate != '') {
      //   this.searchInfo.endDate = this.endDate
      // }
      // if (this.startTime != null && this.startTime != '') {
      //   this.searchInfo.startTime = this.startTime
      // }
      // if (this.endTime != null && this.endTime != '') {
      //   this.searchInfo.endTime = this.endTime
      // }
      this.searchInfo.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo.endTime = this.endDate + ' ' + this.endTime
      this.searchInfo.timeType = this.radio
      this.searchInfo.unitGuid = this.changeschoolid

      this.detailsTotal = null
      this.detailsTotal = await this.getTotal()
      this.gestatistics()
    },
    // 获取楼栋用水汇总数据
    gestatistics() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/water/water-data-building-statistics-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading = false
          this.detailslist = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (data.messageContent.data == null) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          } else {
            this.detailslist.push({
              ...this.detailsTotal
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 楼栋用水汇所有数据导出、打印
    async onExport(type) {
      if (this.detailslist.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getExport()
      if (type == 'print') {
        this.printJS()
      } else {
        this.export2Excel()
      }
    },
    // 获取楼栋用水汇总所有数据
    getExport() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-data-building-statistics-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data || []
              _this.exportlist.push({ ..._this.detailsTotal })
              _this.exportlist.map(item => {
                item.expenditureDinner = _this.amountyua(item.expenditureDinner)
                item.expenditureLunch = _this.amountyua(item.expenditureLunch)
                item.expenditureMorning = _this.amountyua(
                  item.expenditureMorning
                )
                item.expenditureNight = _this.amountyua(item.expenditureNight)
                item.expenditureOther = _this.amountyua(item.expenditureOther)
                item.expenditureSum = _this.amountyua(item.expenditureSum)
              })

              resolve(_this.exportlist)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 打印相关
    printJS() {
      let someJSONdata = this.exportlist
      const title = '楼栋用水汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      if (this.formThead.buildingName.checked == true) {
        properties.push({
          displayName: '楼栋',
          field: 'buildingName',
          columnSize: '7.5%',
          // 需要合并的话，这个字段必填
          columnNo: true
        })
      }
      // if (this.formThead.roomName.checked == true) {
      //   properties.push({
      //     displayName: '房间',
      //     field: 'roomName',
      //     columnSize: '6%',
      //     // 需要合并的话，这个字段必填
      //     columnNo: true
      //   })
      // }
      // if (this.formThead.terminalCode.checked == true) {
      //   properties.push({
      //     displayName: '设备编号',
      //     field: 'terminalCode',
      //     columnSize: '8%',
      //     // 需要合并的话，这个字段必填
      //     columnNo: true
      //   })
      // }
      if (this.formThead.Morning.checked == true) {
        properties.push({
          displayName: '上午',
          field: 'Morning',
          sonProperties: [
            { displayName: '金额(元)', field: 'expenditureMorning' },
            { displayName: '消费次数', field: 'consumeCountMorning' }
          ]
        })
      }
      if (this.formThead.Lunch.checked == true) {
        properties.push({
          displayName: '中午',
          field: 'Lunch',
          sonProperties: [
            { displayName: '金额(元)', field: 'expenditureLunch' },
            { displayName: '消费次数', field: 'consumeCountLunch' }
          ]
        })
      }
      if (this.formThead.Dinner.checked == true) {
        properties.push({
          displayName: '下午',
          field: 'Dinner',
          sonProperties: [
            { displayName: '金额(元)', field: 'expenditureDinner' },
            { displayName: '消费次数', field: 'consumeCountDinner' }
          ]
        })
      }
      if (this.formThead.Night.checked == true) {
        properties.push({
          displayName: '晚上',
          field: 'Night',
          sonProperties: [
            { displayName: '金额(元)', field: 'expenditureNight' },
            { displayName: '消费次数', field: 'consumeCountNight' }
          ]
        })
      }
      // if (this.formThead.Other.checked == true) {
      //   properties.push({
      //     displayName: "其余时间",
      //     field: "Other",
      //     sonProperties: [
      //       { displayName: "金额(元)", field: "expenditureOther" },
      //       { displayName: "消费次数", field: "consumeCountOther" },
      //     ],
      //   });
      // }
      if (this.formThead.Sum.checked == true) {
        properties.push({
          displayName: '小计',
          field: 'Sum',
          sonProperties: [
            { displayName: '金额(元)', field: 'expenditureSum' },
            { displayName: '消费次数', field: 'consumeCountSum' }
          ]
        })
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        let multiHeader = [[]]
        let multiHeader2 = [[]]

        let tHeader = []
        let merges1 = [
          'A1:A2',
          'B1:B2',
          'C1:C2',
          'D1:E1',
          'F1:G1',
          'H1:I1',
          'J1:K1',
          'L1:M1',
          'N1:O1'
        ]

        let merges2 = [
          'A1:A2',
          'B1:B2',
          'C1:D1',
          'E1:F1',
          'G1:H1',
          'I1:J1',
          'K1:L1',
          'M1:N1'
        ]
        let merges3 = [
          'A1:A2',
          'B1:C1',
          'D1:E1',
          'F1:G1',
          'H1:I1',
          'J1:K1',
          'L1:M1'
        ]
        let merges4 = ['A1:B1', 'C1:D1', 'E1:F1', 'G1:H1', 'I1:J1', 'K1:L1']
        let merges = []
        let filterValArr = []
        /**判断有多少个会选中 */
        let arr = [
          this.formThead.buildingName.checked
          // this.formThead.roomName.checked,
          // this.formThead.terminalCode.checked
        ]
        let mergesArr = [merges4, merges3, merges2, merges1]
        let count = 0
        arr.map(item => {
          if (item) {
            count++
          }
        })
        merges = mergesArr[count]
        console.log(merges)
        if (this.formThead.buildingName.checked == true) {
          filterValArr.push(this.formThead.buildingName.prop)
          multiHeader2[0].push('楼栋')
          tHeader.push('楼栋')
        }

        // if (this.formThead.roomName.checked == true) {
        //   filterValArr.push(this.formThead.roomName.prop)
        //   multiHeader2[0].push('房间')
        //   tHeader.push('房间')
        // }
        // if (this.formThead.terminalCode.checked == true) {
        //   filterValArr.push(this.formThead.terminalCode.prop)
        //   multiHeader2[0].push('设备编号')
        //   tHeader.push('设备编号')
        // }
        if (this.formThead.Morning.checked == true) {
          multiHeader2[0].push('上午', '')
          tHeader.push('金额(元)', '消费次数')
        } else {
          merges.splice(merges.length - 1, 1)
        }
        if (this.formThead.Lunch.checked == true) {
          multiHeader2[0].push('中午', '')
          tHeader.push('金额(元)', '消费次数')
        } else {
          merges.splice(merges.length - 1, 1)
        }
        if (this.formThead.Dinner.checked == true) {
          multiHeader2[0].push('下午', '')
          tHeader.push('金额(元)', '消费次数')
        } else {
          merges.splice(merges.length - 1, 1)
        }
        if (this.formThead.Night.checked == true) {
          multiHeader2[0].push('晚上', '')
          tHeader.push('金额(元)', '消费次数')
        } else {
          merges.splice(merges.length - 1, 1)
        }
        // if (this.formThead.Other.checked == true) {
        //   multiHeader2[0].push("其余时间", "");
        //   tHeader.push("金额(元)", "消费次数");
        // } else {
        //   merges.splice(merges.length - 1, 1);
        // }
        if (this.formThead.Sum.checked == true) {
          multiHeader2[0].push('小计', '')
          tHeader.push('金额(元)', '消费次数')
        } else {
          merges.splice(merges.length - 1, 1)
        }

        if (this.formThead.Morning.checked == true) {
          filterValArr.push(this.formThead.expenditureMorning.prop)
        }
        if (this.formThead.Morning.checked == true) {
          filterValArr.push(this.formThead.consumeCountMorning.prop)
        }
        if (this.formThead.Lunch.checked == true) {
          filterValArr.push(this.formThead.expenditureLunch.prop)
        }
        if (this.formThead.Lunch.checked == true) {
          filterValArr.push(this.formThead.consumeCountLunch.prop)
        }
        if (this.formThead.Dinner.checked == true) {
          filterValArr.push(this.formThead.expenditureDinner.prop)
        }
        if (this.formThead.Dinner.checked == true) {
          filterValArr.push(this.formThead.consumeCountDinner.prop)
        }
        if (this.formThead.Night.checked == true) {
          filterValArr.push(this.formThead.expenditureNight.prop)
        }
        if (this.formThead.Night.checked == true) {
          filterValArr.push(this.formThead.consumeCountNight.prop)
        }
        // if (this.formThead.Other.checked == true) {
        //   filterValArr.push(this.formThead.expenditureOther.prop);
        // }
        // if (this.formThead.Other.checked == true) {
        //   filterValArr.push(this.formThead.consumeCountOther.prop);
        // }
        if (this.formThead.Sum.checked == true) {
          filterValArr.push(this.formThead.expenditureSum.prop)
        }
        if (this.formThead.Sum.checked == true) {
          filterValArr.push(this.formThead.consumeCountSum.prop)
        }
        console.log(filterValArr)
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader2, //这里是第二行的表头
          header: tHeader,
          data,
          merges,
          filename: this.filename + nowtime,
          tableheader: '2'
        })
      })
    },
    // 楼栋用水汇总分页
    handleSizeChange(val) {
      this.pageSize = val
      this.gestatistics()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.gestatistics()
    },
    //
    /**
     * 每日用水
     */
    checkboxChanged3() {
      this.$nextTick(() => {
        this.$refs['detailslist3'].doLayout()
      })
    },
    // 每日用水查询
    async DailySubmit() {
      this.pageNum3 = 1
      this.searchInfo3 = {}
      this.searchInfo3.unitGuid = this.changeschoolid

      if (this.checktype == 'area') {
        this.searchInfo3.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo3.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo3.layer = this.typeid.split('$')[0]
        this.searchInfo3.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo3.roomGuid = this.typeid
      }
      if (
        this.startDate == null ||
        this.startDate == '' ||
        this.endDate == null ||
        this.endDate == ''
      ) {
        this.$message({
          message: '必须选择日期',
          type: 'warning'
        })
        return false
      }
      this.searchInfo3.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo3.endTime = this.endDate + ' ' + this.endTime
      this.searchInfo3.timeType = this.radio
      this.searchInfo3.unitGuid = this.changeschoolid
      this.detailsDailyTotal = null
      this.detailsDailyTotal = await this.getDailyTotal()
      this.getDailydetailslist()
    },
    // 获取楼栋用水汇总合计数据
    getDailyTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-ever-day-gather-building-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo3,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 区域每日用水查询
    getDailydetailslist() {
      this.loading3 = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/water/water-ever-day-gather-building-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum3,
            pageSize: this.pageSize3,
            searchInfo: this.searchInfo3
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading3 = false
          if (data.messageContent.data == null) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
          this.detailslist3 = data.messageContent.data || []
          this.recordCount3 = data.messageContent.recordCount
          this.currentPage3 = data.messageContent.pageNum
          if (this.detailslist3.length != 0) {
            this.detailslist3.push({
              ...this.detailsDailyTotal,
              expenditureMax: '',
              expenditureMin: '',
              waterAmountMax: '',
              waterAmountMin: ''
            })
          }
          this.headerArr = []
          for (var i = 0; i < this.detailslist3.length; i++) {
            this.detailslist3[i].id = 'aa' + [i].toString()
            this.headerArr.push(this.detailslist3[i])
            if (
              this.detailslist3[i].dayList != null &&
              this.detailslist3[i].dayList.length != 0
            ) {
              for (var j = 0; j < this.detailslist3[i].dayList.length; j++) {
                this.headerArr.push(this.detailslist3[i].dayList[j])
                this.detailslist3[i].dayList[j].id =
                  'ab' + i.toString() + 'a' + j.toString()
              }
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 区域每日用水导出或打印
    async onDailyExport(type) {
      if (this.detailslist3.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getDailyExport()
      if (type == 'print') {
        this.printDailyJS()
      } else {
        this.exportDailyExcel()
      }
    },

    // 打印相关
    printDailyJS() {
      let someJSONdata = this.DailyExportlist
      const title = '楼栋每日用水汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead3) {
        if (this.formThead3[key].checked) {
          console.log(Object.keys(this.formThead3).length)
          if (this.formThead3[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 150 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 100 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo3.startDate),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo3.endDate),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 获取到所有数据
    getDailyExport() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-ever-day-gather-building-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount3,
                searchInfo: _this.searchInfo3
              },
              messageType: _this.messageType
            })
          })
          .then(({ data }) => {
            if (data.messageCode === 200) {
              // _this.DailyExportlist = data.messageContent.data;
              _this.DailyExportlist = []
              data.messageContent.data.map(item => {
                _this.DailyExportlist.push(item)
                if (item.dayList.length != 0) {
                  item.dayList.map(Citem => {
                    _this.DailyExportlist.push(Citem)
                  })
                }
              })
              _this.DailyExportlist.push({
                ..._this.detailsDailyTotal,
                expenditureMax: '',
                expenditureMin: '',
                waterAmountMax: '',
                waterAmountMin: ''
              })
              _this.DailyExportlist.map(item => {
                item.expenditureSum = _this.amountyua(item.expenditureSum)
                item.expenditureMax = _this.amountyua(item.expenditureMax)
                item.expenditureMin = _this.amountyua(item.expenditureMin)
              })

              resolve(_this.DailyExportlist)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    exportDailyExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        let filterValArr = []
        for (let key in this.formThead3) {
          if (this.formThead3[key].checked) {
            tHeaderarr.push(this.formThead3[key].label)
            filterValArr.push(this.formThead3[key].prop)
          }
        }
        const tHeader = tHeaderarr

        const filterVal = filterValArr
        const list = this.DailyExportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename3 + nowtime
        })
      })
    },
    handleSizeChange3(val) {
      this.pageSize3 = val
      this.getDailydetailslist()
    },
    handleCurrentChangepage3(val) {
      this.pageNum3 = val
      this.getDailydetailslist()
    },

    /**
     *  楼栋用水-用水明细
     */
    async DetailsonSubmit() {
      this.pageNum2 = 1
      this.searchInfo2 = {}
      this.searchInfo2.unitGuid = this.changeschoolid
      if (this.checktype == 'area') {
        this.searchInfo2.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo2.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo2.layer = this.typeid.split('$')[0]
        this.searchInfo2.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo2.roomGuid = this.typeid
      }
      this.searchInfo2.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo2.endTime = this.endDate + ' ' + this.endTime
      this.searchInfo2.timeType = this.radio
      this.searchInfo2.unitGuid = this.changeschoolid
      this.ermainaldeTotal = null
      this.ermainaldeTotal = await this.getTermainaldeTotal()
      this.gettermainaldetailslist()
    },

    handleClick() {},
    // 获取楼栋用水明细合计数据
    getTermainaldeTotal() {
      let _this = this
      _this.loading2 = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-terminal-details-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo2,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading2 = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    //楼栋用水明细
    gettermainaldetailslist() {
      this.loading2 = true
      this.$http({
        url: this.$http.adornUrl('/terminal/water/water-terminal-details-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      })
        .then(({ data }) => {
          if (data.messageCode == 200) {
            this.loading2 = false
            console.log(data)
            this.detailslist2 = data.messageContent.data || []
            this.recordCount2 = data.messageContent.recordCount
            this.currentPage2 = data.messageContent.pageNum
            if (this.detailslist2.length != 0) {
              this.detailslist2.push({
                ...this.ermainaldeTotal,
                newBalance: ''
              })
            }
            if (data.messageContent.data.length == 0) {
              this.$message({
                message: '查询成功当前暂无数据',
                type: 'success'
              })
            }
          } else {
            this.$message.error(data.errorMessage)
          }
        })
        .catch(function(e) {
          this.loading2 = false
          // console.log(e)
          this.$message.error('请求数据失败，请重新导出')
        })
    },
    // 导出用水明细数据
    async DetailsonExport(type) {
      if (this.detailslist2.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getDetailson()
      if (type == 'print') {
        this.printDetailsonJS()
      } else {
        this.export2Excel2()
      }
    },
    // 得到所有用水明细数据
    getDetailson() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-terminal-details-list'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount2,
                searchInfo: _this.searchInfo2
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist2 = data.messageContent.data
              if (_this.exportlist2.length != 0) {
                _this.exportlist2.push({
                  ..._this.ermainaldeTotal,
                  newBalance: ''
                })
              }
              for (var i = 0; i < _this.exportlist2.length; i++) {
                if (_this.exportlist2[i].pulseFlag == 0) {
                  _this.exportlist2[i].pulseFlag = '是'
                }
                if (_this.exportlist2[i].pulseFlag == 1) {
                  _this.exportlist2[i].pulseFlag = '否'
                }
                // 交易类型
                _this.exportlist2[i].useType = _this.filterchargingType(
                  _this.exportlist2[i].useType
                )
                _this.exportlist2[i].expenditure = _this.amountyua(
                  _this.exportlist2[i].expenditure
                )
                _this.exportlist2[i].newBalance = _this.amountyua(
                  _this.exportlist2[i].newBalance
                )
              }
              // setTimeout(() => {
              //   _this.export2Excel2();
              // }, 100);
              resolve(_this.exportlist2)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
          .catch(function(e) {
            // console.log(e)
            _this.$message.error('请求数据失败，请重新导出')
          })
      })
    },
    // 打印相关
    printDetailsonJS() {
      let someJSONdata = this.exportlist2
      const title = '楼栋用水明细表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
          console.log(Object.keys(this.formThead2).length)
          if (this.formThead2[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 150 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 100 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo2.startDate),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo2.endDate),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出
    export2Excel2() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        let filterValArr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label)
            filterValArr.push(this.formThead2[key].prop)
          }
        }
        const tHeader = tHeaderarr
        const filterVal = filterValArr
        const list = this.exportlist2
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        })
      })
    },
    // 分页
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.gettermainaldetailslist()
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      this.gettermainaldetailslist()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-radio + .el-radio {
  margin-left: 0;
}
.regional_water {
  // padding: 0px 5px 10px 1px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .regional_water .demo-form-inline .el-date-editor.el-input {
    width: 100px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    padding-left: 10px;
    /deep/.el-form-item__label {
      // padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .demo-form-inline1 {
    margin-bottom: 5px;
    // border-bottom: 1px solid #ccc;
  }
  .all_left {
    // height: 400px;
    // height: 100%;
    // border-right: 2px solid #ccc;
    .bg-purple {
      // height: 100%;
      width: 100%;
      // overflow-x: scroll;
      white-space: nowrap;
      // padding: 0 10px 0 0px;
      .header_title {
        padding: 20px 0;
        font-weight: bolder;
        text-align: center;
        border-bottom: 1px solid #e5e9f2;
        color: #909399;
        overflow: hidden;
      }
      .add_button {
        display: flex;
        padding-top: 20px;
        justify-content: center;
        border-bottom: 1px solid #e5e9f2;
        padding-bottom: 10px;
        overflow: hidden;
      }
      //滚动条的宽度
      ::-webkit-scrollbar {
        overflow-y: auto;
        width: 10px;
        height: 10px;
      }
      //滚动条的滑块
      ::-webkit-scrollbar-thumb {
        background-color: #a1a3a9;
        border-radius: 3px;
      }
      .tree_list {
        height: calc(100vh - 190px);
        width: 100%;
        // overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }
        .custom-tree-node {
          // padding-left: 10px;
          /deep/.el-button + .el-button {
            margin-left: 0px;
          }
          //
          font-size: 12px;
          .colorfont {
            color: #17b3a3;
            // /deep/.el-icon-map-location{
            //   margin-right: 0px !important;
            // }
          }
          .colorfont1 {
            // /deep/.el-icon-school{
            //   margin-right: 0px !important;
            // }
          }
        }
        .el-tree-node__content {
        }
      }
    }
  }
  .all_right {
    height: calc(100vh - 140px);
    // background:red;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>